<template>
  <div>
    <!--新增，编辑角色-->
    <dt-modal-info ref="editRef" title="查看人员所属组织" :width="800">
      <div class="userBox">
        <span>人员名称：{{ userPhoneVal.userName }}</span>
        <span>人员手机号：{{ userPhoneVal.phone }}</span>
      </div>

      <div>
        <div>该人员已存在以下项目组织：</div>
        <dt-grid ref="tableRef" :onFetch="onFetch"></dt-grid>
      </div>
    </dt-modal-info>
  </div>
</template>

<script setup>
  import { watch, onMounted, reactive, ref } from 'vue'
  import { RouterView } from 'vue-router'
  // import { editOpt } from '../biz/edit'
  import dt from '@dt/dt'
  // import roleMgr from '../biz/index'
  import permissionMgr from '@/biz/permission'
  import { listOpt } from '../biz/orgColumns.js'
  import apiMgr from '../biz/index.js'

  const editRef = ref()
  const tableRef = ref()

  function onFetch(data) {
    console.log(data, '222')

    if (teamFlag.value) {
      let params = {
        id: userPhoneVal.value.tenantUserId
      }
      return apiMgr.getUserTeam(params)
    } else {
      let params = {
        ...data,
        phone: userPhoneVal.value.phone,
        userId: userPhoneVal.value.userId
      }
      return apiMgr.getTenantListByPhoneForWeb(params)
    }
  }
  const userPhoneVal = ref({})
  const teamFlag = ref(false)

  const fun = {
    isTeam: () => {
      return teamFlag.value
    }
  }
  function show(val, val1) {
    userPhoneVal.value = val
    teamFlag.value = val1

    editRef.value.show()
    tableRef.value.init(new listOpt(fun))
    tableRef.value.fetch(fun)
  }

  defineExpose({ show })
</script>

<style scoped>
  .userBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 400px;
    margin-bottom: 10px;
  }
</style>
